<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>工作台</title>

    <!--使用IE兼容模式渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../style/dist/hover.css">
    <link rel="stylesheet" href="../style/dist/swiper.min.css">

    <link rel="stylesheet" href="../style/h-base.css">
    <link rel="stylesheet" href="../style/h-mhqy.css">

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body style="padding: 20px">

<div id="vuePage" v-cloak>

    <div class="width_1200">
        <!--服务中心-->
        <div class="service_center">
            <img class="img_l" :src="service_data.img_url" alt="" >
            <div class="text_r">
                <h2 class="title_name">{{service_data.title_name}}</h2>
                <div class="cell_list">
                    <div class="cell_item">服务区域：{{service_data.region}}</div>
                    <div class="cell_item">服务电话：{{service_data.phone}}</div>
                </div>
                <div class="cell_list">所在地址：{{service_data.address}}</div>
                <div class="tab_list">
                    <div class="tab_item">
                        <p>推广引流</p>
                        <strong>{{service_data.spread}} <span>人次</span></strong>
                    </div>
                    <div class="tab_item">
                        <p>报读数量</p>
                        <strong>{{service_data.read}} <span>人次</span></strong>
                    </div>
                    <div class="tab_item">
                        <p>补贴申领人数</p>
                        <strong>{{service_data.application}} <span>人次</span></strong>
                    </div>
                    <div class="tab_item">
                        <p>补贴发放金额</p>
                        <strong>{{service_data.grant}} <span>元</span></strong>
                    </div>
                </div>
            </div>
        </div>
        <hr style="background: #e5e5e5;height: 1px;border: none;margin: 40px auto">
        <div class="block_title">辖区服务动态</div>
        <!--辖区动态-->
        <div class="moving_body">
            <div class="swiper-container swiper-moving">
                <div class="swiper-wrapper">
                    <div class="swiper-slide  item_text" v-for="(item,index) in moving_data" :key="item.update_data">
                        <div class="text_title"><span class="text_time">{{item.update_data}}</span>{{item.text_title}}</div>
                    </div>
                </div>
            </div>
        </div>

        <hr style="background: #e5e5e5;height: 1px;border: none;margin: 40px auto">
        <div class="block_title">辖区服务网点</div>
        <!--辖区动态-->
        <div class="website_body">
            <div class="tabs_list">
                <a href="javascript:;"  :class="tabs_active == index?'tabs_item active':'tabs_item'"
                   v-for="(item,index) in website_data" :key="item.name" @click="tabs_cutover(index)">
                    {{item.name}}({{item.list.length}})</a>
            </div>
            <div class="tabs_body">
                <div class="swiper-container swiper-website">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide tabs_item" v-for="(item,index) in tabs_list" :key="item.title_name">
                            <img class="img_l" :src="item.img_url" alt="" >
                            <div class="text_r">
                                <h2 class="title_name">{{item.title_name}}</h2>
                                <div class="cell_list">地址：{{item.address}}</div>
                                <div class="cell_list">电话：{{item.phone}}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <hr style="background: #e5e5e5;height: 1px;border: none;margin: 40px auto">
        <div class="block_title">求学圆梦 · 区域服务职能</div>
        <div class="block_2_title">区服务组织与服务</div>

        <div class="organ_body">
            <div class="organ_item" v-for="(item,index) in organ_data" :key="item.title_name">
                <img class="img_l" :src="item.img_url" alt="" >
                <div class="text_r">
                    <h2 class="title_name">{{item.title_name}}</h2>
                    <div class="cell_list">{{item.text_1}}</div>
                    <div class="cell_list">{{item.text_2}}</div>
                    <button><img src="../images/fwd_19.png" alt="">{{item.button}}</button>
                </div>
            </div>
        </div>

        <div class="block_2_title">将教育服务送到企业和职工身边</div>
        <div class="video_body">
            <div class="l_img">
                <img class="img_bg" :src="video_data.img_url" alt="">
                <button><img src="../images/fwd_19.png" alt="">{{video_data.btn_name}}</button>
            </div>
            <div class="r_video">
                <h3>{{video_data.text_title}}</h3>
                <div class="swiper-container video-swiper" style="padding: 0 50px;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,index) in video_data.video_list" :key="item.title_name">
                            <a href="javascript:;" class="video_item" @click="video_cutover(index)">
                                <img :src="item.img_url" alt="">
                            </a>
                        </div>

                    </div>
                    <!-- Add Arrows -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>
        </div>

        <div class="block_title">辖区内求学圆梦趋势</div>
        <div class="trend_body">
            <div class="btn_list">
                <a :class="echarts_index == 0?'active':''"  href="javascript:;" @click="echarts_cutover(0)">本日</a>
                <a :class="echarts_index == 1?'active':''"  href="javascript:;" @click="echarts_cutover(1)">本周</a>
                <a :class="echarts_index == 2?'active':''" href="javascript:;" @click="echarts_cutover(2)">本期</a>
            </div>
            <div id="Personal_mrcd" style="width: 100%;height:400px;"></div>
        </div>

        <div class="block_title">各地求学圆梦动态</div>
        <div class="qxym_body">
            <div class="l_img">
                <div class="swiper-container qxym-swiper">
                    <div class="swiper-wrapper">
                        <a href="javascript:;" class="swiper-slide"  v-for="(item,index) in qxym_data.img_list" :key="item.img_url">
                            <img class="img_bg" :src="item.img_url" alt="">
                        </a>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="r_text">
                <div class="text_list">
                    <a href="javascript:;" class="text_item"  v-for="(item,index) in qxym_data.text_list" :key="item.time">
                        <span>{{item.time}}</span>
                        <p>{{item.text}}</p>
                    </a>
                </div>
            </div>
        </div>

        <div class="block_title">相关网站</div>
        <div class="site_body">
            <a  class="text_item"  v-for="(item,index) in site_data" :key="item.time" :href="item.text">
                <p>{{item.text}}</p>
                <div class="p_text">
                    <span class="l_text">{{item.time}}</span> <span class="r_text"> → </span>
                </div>

            </a>
        </div>
    </div>

    <div v-show="video_show" class="model_video">
        <div class="model_body">
            <a class="model_out_btn" href="javascript:;" @click="video_show = false"><img src="http://css.tt.gzedu.com/workeredu_cn/platform_admin/v1.0/images/fwd_18.png" alt=""></a>
            <h2>{{video_item.title}}</h2>
            <video :src="video_item.video_url"
                   width="520" height="290"
                   :poster="video_item.img_url"
                   controls></video>
            <p class="atl_text"><span class="l_text">本视频已被分享：{{video_item.share_number}}次</span> <span class="r_text">累计访问：{{video_item.access_number}}人次</span></p>
            <h2>课程简介</h2>
            <p class="jj_text">{{video_item.synopsis}}</p>
            <footer>
                <h3>分享推广</h3>
                <p class="ewm_text">使用微信扫描右侧二维码，打开国开在线“国开在线”</p>
                <p class="ewm_text">小程序，可以将本视频分享给好友。</p>
                <img class="ewm_img" :src="video_item.ewm_url" alt="">
            </footer>
        </div>
    </div>

    <!--悬浮内容-->
    <div class="suspension_body">
        <a href="javascript:;" class="out_img" @click="suspension_show = !suspension_show">
            <img  v-show="!suspension_show" src="../images/fwd_22.png" alt="">
            <img  v-show="suspension_show" src="../images/fwd_23.png" alt="">
        </a>
        <div v-show="suspension_show"  class="tab_body">
            <div class="item_1">
                <p class="phone">{{suspension_data.phone}}</p>
                <u class="mail">{{suspension_data.mail}}</u>
                <button></button>
            </div>

            <div class="item_2">
                <button>▶ 查看详情</button>
            </div>
            <div class="item_3">
                <button>▶ 查看详情</button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../style/dist/swiper.min.js"></script>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript" src="../js/vue.min.js"></script>
<script>
  var app = new Vue({
    el: '#vuePage',
    data: {
      service_data:{},
      moving_data:[],
      website_data:[],
      tabs_list:[],
      tabs_active:0,
      organ_data:[],
      video_data:{},
      video_show: false,
      video_item:{},
      video_index:0,
      trend_data:{},
      echarts_index:0,
      qxym_data:{},
      site_data:[],
      suspension_show:false,
      suspension_data:{},

    },
    methods: {
      service_method:function(){
        const _this = this ;
        $.ajax({
          url: '../data/01_service_center.json',
          type: 'get',
          dataType: 'json',
          cache: false,
          async: true,//设为同步请求
          success: function (res) {
            var data = res.data;
            if (res.code == 200) {
              _this.service_data = data.service_data ;
            } else {

            }

          },
          error: function () {}
        })
      },
      moving_method:function(){
        const _this = this ;
        $.ajax({
          url: '../data/01_service_center.json',
          type: 'get',
          dataType: 'json',
          cache: false,
          async: true,//设为同步请求
          success: function (res) {
            var data = res.data;
            if (res.code == 200) {
              _this.moving_data = data.moving_data ;

              setTimeout(function () {
                _this.moving_swiper();
              },100)
            } else {

            }

          },
          error: function () {}
        })
      },
      moving_swiper:function () {
        new Swiper('.swiper-moving', {
          direction: 'vertical',
          slidesPerView: 2,
          centeredSlides: true,
          loop : true,
          autoplay: {
            delay: 3000,
            stopOnLastSlide: false,
            disableOnInteraction: true
          }
        });
      },
      website_method:function(){
        const _this = this ;
        $.ajax({
          url: '../data/01_service_center.json',
          type: 'get',
          dataType: 'json',
          cache: false,
          async: true,//设为同步请求
          success: function (res) {
            var data = res.data;
            if (res.code == 200) {
              _this.website_data = data.website_data ;
              _this.tabs_list = data.website_data[_this.tabs_active].list ;

              setTimeout(function () {
                _this.website_swiper();
              },100)
            } else {

            }

          },
          error: function () {}
        })
      },
      tabs_cutover:function(index){
        const _this = this ;
        this.tabs_active = index ;
        this.tabs_list = this.website_data[index].list ;
        setTimeout(function () {
          _this.website_swiper();
        },50)
      },
      website_swiper:function () {
        new Swiper('.swiper-website', {
          slidesPerView: 2,
          slidesPerColumn: 2,
          spaceBetween: 20,
//          loop : true,
//          autoplay: {
//            delay: 3000,
//            stopOnLastSlide: false,
//            disableOnInteraction: true
//          },
        });
      },
      organ_method:function(){
        const _this = this ;
        $.ajax({
          url: '../data/01_service_center.json',
          type: 'get',
          dataType: 'json',
          cache: false,
          async: true,//设为同步请求
          success: function (res) {
            var data = res.data;
            if (res.code == 200) {
              _this.organ_data = data.organ_data ;
              console.log(_this.organ_data)
            } else {

            }

          },
          error: function () {}
        })
      },
      video_method:function(){
        const _this = this ;
        $.ajax({
          url: '../data/01_service_center.json',
          type: 'get',
          dataType: 'json',
          cache: false,
          async: true,//设为同步请求
          success: function (res) {
            var data = res.data;
            if (res.code == 200) {
              _this.video_data = data.video_data ;
              _this.video_item = data.video_data.video_list[_this.video_index] ;

              setTimeout(function () {
                _this.video_swiper();
              },500)

            } else {

            }

          },
          error: function () {}
        })
      },
      video_swiper:function () {
        new Swiper('.video-swiper', {
          slidesPerView : 1.9,
          spaceBetween : 20,
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
        });
      },
      video_cutover:function(index){
        this.video_index = index ;
        this.video_item = this.video_data.video_list[index] ;
        this.video_show = true ;
      },
      echarts_method:function(){
        const _this = this ;
        $.ajax({
          url: '../data/01_service_center.json',
          type: 'get',
          dataType: 'json',
          cache: false,
          async: true,//设为同步请求
          success: function (res) {
            var data = res.data;
            if (res.code == 200) {

              _this.trend_data = data.trend_data ;

              option.xAxis[0].data = data.trend_data[_this.echarts_index].data ;
              option.series = data.trend_data[_this.echarts_index].series ;
              Personal.setOption(option);//重新渲染
            } else {

            }

          },
          error: function () {}
        })
      },
      echarts_cutover:function(index){
        this.echarts_index = index ;

        option.xAxis[0].data = this.trend_data[index].data ;
        option.series = this.trend_data[index].series ;
        Personal.setOption(option);//重新渲染
      },
      qxym_method:function(){
        const _this = this ;
        $.ajax({
          url: '../data/01_service_center.json',
          type: 'get',
          dataType: 'json',
          cache: false,
          async: true,//设为同步请求
          success: function (res) {
            var data = res.data;
            if (res.code == 200) {
              _this.qxym_data = data.qxym_data ;

              setTimeout(function () {
                _this.qxym_swiper();
              },500)

            } else {

            }

          },
          error: function () {}
        })
      },
      qxym_swiper:function () {
        new Swiper('.qxym-swiper', {
          pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
          },
        });
      },
      site_method:function(){
        const _this = this ;
        $.ajax({
          url: '../data/01_service_center.json',
          type: 'get',
          dataType: 'json',
          cache: false,
          async: true,//设为同步请求
          success: function (res) {
            var data = res.data;
            if (res.code == 200) {
              _this.site_data = data.site_data ;
            } else {

            }

          },
          error: function () {}
        })
      },
      suspension_method:function(){
        const _this = this ;
        $.ajax({
          url: '../data/01_service_center.json',
          type: 'get',
          dataType: 'json',
          cache: false,
          async: true,//设为同步请求
          success: function (res) {
            var data = res.data;
            if (res.code == 200) {
              _this.suspension_data = data.suspension_data ;
            } else {

            }

          },
          error: function () {}
        })
      }
    },
    mounted: function () {
        this.service_method() ; //服务中心
        this.moving_method() ; //辖区服务动态
        this.website_method() ; //辖区服务网点
        this.organ_method() ; //区服务组织与服务
        this.video_method() ; //视屏
        this.echarts_method() ; //趋势
        this.qxym_method() ; //求学圆梦动态
        this.site_method() ; //求学圆梦动态
        this.suspension_method() ; //悬浮内容
    }
  })

  var Personal = echarts.init(document.getElementById('Personal_mrcd'));
  $(function () {
    window.addEventListener("resize", function () {
      Personal.resize();
    });


    var colors = ['#009C9A', '#5EE0F4', '#FF9BA8'];


    option = {
      color: colors,

      tooltip: {
        trigger: 'axis',
      },
      legend: {
        x : 'center',
        y : 'bottom',
        data:['新组织职工人数', '学历报读人数','新增参与企业数']
      },
      grid: {
        top: 10,
        bottom: 70
      },
      xAxis: [
        {
          data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
        }
      ],
      yAxis: [
        {
          type: 'value',
          position: 'left',
          min: 0,
          axisLine: {
            lineStyle: {
              color: "#999999"
            }
          },
          axisLabel: {
            formatter: '{value}'
          }
        }
      ],
      series: [
        {
          name:'新组织职工人数',
          type:'line',
          smooth: true,
          data: [5, 45, 34, 23, 12, 483, 134, 34, 88, 55, 45, 232]
        },
        {
          name:'学历报读人数',
          type:'line',
          smooth: true,
          data: [39, 59, 31, 187, 483, 692, 131, 146, 55, 134, 103, 70]
        },
        {
          name:'新增参与企业数',
          type:'line',
          smooth: true,
          data: [39, 59, 111, 187, 483, 622, 231, 46, 55, 184, 103, 70]
        }
      ]
    };


    // 使用刚指定的配置项和数据显示图表。
    Personal.setOption(option);
  })
</script>
</body>
</html>
